<template>
	<div>
		<el-drawer v-model="state.dialog.isShowDialog" :direction="direction" :before-close="handleFileDataClose">
			<!-- <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px"> -->
			<template #header>
				<span>{{ state.dialog.title }}</span>
			</template>
			<div class="upload-home">
				<div class="btn-group">
					<el-button-group>
						<el-button type="primary" @click="upload">上传文件</el-button>
						<el-button type="primary">上传文件夹</el-button>
					</el-button-group>
				</div>
				<div class="file-box">
					<p class="title">文件资源库</p>
					<!-- todo 已上传的文件列表 -->
					<div v-if="!fileList.length" class="empty">
						<el-empty>
							<template #description>
								<p>暂无文件，请先<a class="upload" @click="upload">上传</a></p>
							</template>
						</el-empty>
					</div>
					<div v-else class="upload-file-list">
						<ul>
							<li v-for="(f, index) in fileList" @mousemove="fileMove(index)" @mouseleave="fileLeave">
								<div class="upload-file-list-content">{{ f.filename }}</div>
								<div class="upload-file-list-execute">
									<SvgIcon name="ele-Close" :size="24" v-if="currentIndex == index" @click.stop="deleteFile(index)" />
									<SvgIcon name="ele-CircleCheck" :size="24" v-else />
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handleFileDataClose" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">提交</el-button>
				</div>
			</template>
		</el-drawer>
		<!-- </el-dialog> -->
		<GlobalUploader @saveFile="onSaveFile" ref="GlobalUploaderRef" />
	</div>
</template>

<script setup lang="ts" name="fileUploadDialog">
import { defineAsyncComponent, onMounted, ref, onBeforeUnmount, reactive } from 'vue';
import mittBus from '/@/utils/mitt';
import { fileApi } from '/@/api/file/index';
import msg from '/@/utils/messageUtils';
import { stat } from 'fs';
const GlobalUploader = defineAsyncComponent(() => import('/@/components/uploader/GlobalUploader.vue'));
const fileList = ref<UploadFile[]>([]);
const currentIndex = ref<Number>(-1);
const direction = ref('ltr');
const GlobalUploaderRef = ref();
const emit = defineEmits(['refreshFile']);
const state = reactive({
	dialog: {
		title: '新增文件',
		isShowDialog: false,
	},
	fileCatalogId: '',
});

const upload = () => {
	mittBus.emit('openUploader', {
		// 给服务端的额外参数
		params: {
			page: 'home',
		},
	});
};

const handleFileDataClose = () => {
	state.dialog.isShowDialog = false;
};
onMounted(() => {
	console.log('上传文件');

	mittBus.on('fileAdded', () => {
		console.log('文件已选择');
	});

	// 文件上传成功的回调
	mittBus.on('fileSuccess', () => {
		console.log('文件上传成功');
	});
});

onBeforeUnmount(() => {
	mittBus.off('fileAdded');
	mittBus.off('fileSuccess');
});

const onSaveFile = (file: UploadFile) => {
	console.log('回调保存文件: ', file);
	fileList.value?.push(file);
	console.log('files: ', fileList.value);
};

const fileLeave = () => {
	currentIndex.value = -1;
};
const fileMove = (index: number) => {
	currentIndex.value = index;
};

const openDialog = (id: string) => {
	state.dialog.isShowDialog = true;
	state.fileCatalogId = id;
};

const deleteFile = (index: number) => {
	console.log('index: ', index);
	fileList.value.splice(index, 1);

	console.log('删除后的文件: ', fileList.value);
};

const onSubmit = async () => {
	console.log('提交文件');
	try {
		const req: SubmitUploadFile[] = resolveFileReq();
		if (req.length < 1) {
			msg().warn('请先上传文件');
			return;
		}
		const { data } = await fileApi().submit(req);
		msg().success('提交文件成功.');
		handleFileDataClose();
		GlobalUploaderRef.value.uploadListDialog();
		fileList.value = [];
		emit('refreshFile');
	} catch (error) {
		msg().error('提交文件失败.');
	}
};

const resolveFileReq = () => {
	let req: SubmitUploadFile[] = <SubmitUploadFile[]>[];
	if (fileList.value.length > 0) {
		fileList.value.forEach((e) => {
			req.push({
				md5: e.identifier,
				originalName: e.filename,
				originalFileType: e.fileType,
				relativePath: e.relativePath,
				fileCatalogId: state.fileCatalogId,
			});
		});
	}
	return req;
};

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.upload-home {
	height: 100%;

	.btn-group {
		padding: 10px;
	}
}

.file-box {
	margin-top: 20px;
	padding: 30px;
	flex: 1;
	background-color: #fff;

	.title {
		padding-left: 10px;
		font-size: 15px;
		border-left: 4px solid #1989fa;
	}

	.empty {
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);

		.upload {
			color: #1989fa;
			cursor: pointer;
		}
	}
}

.upload-file-list {
	ul {
		list-style: none;

		li {
			margin: 10px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.upload-file-list-execute {
				color: var(--el-color-success-light-3);
			}

			.upload-file-list-content {
				color: var(--el-text-color-regular);
			}

			&:hover {
				background-color: var(--el-bg-color-page);
				cursor: pointer;
				.upload-file-list-execute {
					color: var(--el-color-primary);
				}
				.upload-file-list-content {
					color: var(--el-color-primary);
				}
			}
		}
	}
}

.dialog-footer {
	margin: 15px;
}
</style>
